import Taro, { Component } from '@tarojs/taro'
import { View, Button, Picker, Textarea, Input } from '@tarojs/components'
import { connect } from '@tarojs/redux'

import {createTopicAction} from '../../actions/createTopicAction'
import {editTopic} from '../../actions/topicListAction'
import './index.scss'

@connect((store) => {
  return {...store.menuReducer, ...store.userReducer, topicInfo: store.topicListReducer.topicInfo}
})
class PublicEdit extends Component{
  state = {
    selectChecked: '',
    title: '',
    content: '',
    isEdit: false,
  }
  componentDidMount(){
    let {edit} = this.props
    let {topicInfo} = this.props
    if(edit === '1'){
      this.setState({
        isEdit: true,
        topicInfo: topicInfo,
        title: topicInfo ? topicInfo.title : '',
        content: topicInfo ? topicInfo.content: ''
      })
    }
    // if(edit === '1'){
    //   this.setState({
    //     isEdit: true
    //   }, () => {
    //     if(this.state.isEdit){
    //       let {topicInfo} = this.props
    //       console.log(this.state)
    //       this.setState({
    //         topicInfo: topicInfo,
    //         title: topicInfo.title,
    //         content: topicInfo.content
    //       })
    //     }
    //   })
    // }
  }
  handleChange(e){
    let {list} = this.props
    this.setState({
      selectChecked: list[e.detail.value]
    })
  }
  changeTopicTitle(e){
    this.setState({
      title: e.target.value
    })
  }
  changeTopicCentent(e){
    this.setState({
      content: e.target.value
    })
  }
  submitTopicBtn(){
    let {title, content, selectChecked, isEdit} = this.state
    let {accesstoken, topicInfo} = this.props
    if(title && content && selectChecked){
      let params = {
        tab: 'dev',
        title,
        content,
        accesstoken,
        topic_id: topicInfo.id
      }
      if(isEdit){
        editTopic(params).then(res => {
          if(res){
            Taro.navigateBack()
          }
        })
      }else{
        createTopicAction(params).then(res => {
          if(res){
            Taro.redirectTo({url: '/pages/user/index'})
          }
        })
      }
    }else{
      Taro.showToast({title: '分类话题标题或内容不能为空', icon: 'none'})
    }
  }
  render(){
    let {list} = this.props
    let {selectChecked, topicInfo, isEdit} = this.state
    return(
      <View className='public-content'>
        <Picker mode='selector' range={list} rangeKey='value' onChange={this.handleChange.bind(this)}>
          <View>当前选择的是: {selectChecked.value}</View>
        </Picker>
        <Input value={isEdit ? (topicInfo ? topicInfo.title : '') : ''} className='public-title' onInput={this.changeTopicTitle.bind(this)} placeholder='请输入话题标题' />
        <Textarea value={isEdit ? (topicInfo ? topicInfo.content : '') : ''} className='public-textarea' onInput={this.changeTopicCentent.bind(this)} placeholder='请输入话题内容' />
        <Button className='public-submit' onClick={this.submitTopicBtn.bind(this)}>提交</Button>
      </View>
    )
  }
}

export default PublicEdit